<template>
  <div>
    <el-form
      ref="registerForm"
      :model="regForm"
      :rules="registerRules"
      class="registerForm"
    >
      <el-form-item prop="username">
        <el-input v-model="regForm.username" type="text" autocomplete="off" placeholder="电话号码">
          <i slot="prefix" class="el-input__icon el-icon-mobile-phone" style="font-size: 15px" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="regForm.password" :type="passType" autocomplete="off" placeholder="6位及以上的密码" show-password>
          <i slot="prefix" class="el-input__icon el-icon-key" style="font-size: 15px" />
        </el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input v-model="regForm.checkPass" :type="checkPassType" autocomplete="off" placeholder="再一次输入密码" show-password>
          <i slot="prefix" class="el-input__icon iconfont icon-eye-line" style="font-size: 15px" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="regForm.code" placeholder="请输入验证码" autocomplete="off">
          <el-button slot="append" :disabled="messageStat" type="primary" @click="freshMessageText">{{ getMessageText }}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="space-between">
          <el-button style="width: 45%" icon="el-icon-refresh">清空</el-button>
          <el-button style="width: 45%" type="primary">注册</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

// import { register } from '@/api/api'

import { validateUsername, validateRegisterPassword, validateVerifyCode } from '@/utils/validate-tools'

export default {
  name: 'Register',
  data() {
    const validateReRegisterPassword = (rule, value, callback) => {
      const valueStatus = this.regForm.password === value
      if (value === '') {
        callback(new Error('确认密码不能为空'))
        return
      }
      if (valueStatus) {
        callback()
      } else {
        callback(new Error('与第一次密码不同，请重新设置密码'))
      }
    }
    return {
      passType: 'password',
      checkPassType: 'password',
      getMessageTexts: '发送短信验证码',
      messageStat: false,
      regForm: {
        username: '',
        password: '',
        code: '',
        checkPass: '',
        error: {
          username: '',
          password: '',
          code: ''
        }
      },
      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validateRegisterPassword }],
        checkPass: [{ required: true, trigger: 'blur', validator: validateReRegisterPassword }],
        code: [{ require: true, trigger: 'blur', validator: validateVerifyCode }]
      }
    }
  },
  computed: {
    getMessageText() {
      return this.getMessageTexts
    }
  },
  methods: {
    freshMessageText() {
      const that = this
      let nowTime = 59
      this.messageStat = true
      const interval = setInterval(() => {
        that.getMessageTexts = '重新发送(' + nowTime + ')'
        if (nowTime === 0) {
          that.messageStat = false
          that.getMessageTexts = '发送短信验证码'
          clearInterval(interval)
        }
        nowTime--
      }, 1000)
    },
    clearAllData() {
      this.$refs.registerForm.resetFields()
    }
  }
}
</script>

<style scoped>

input {
  caret-color: black;
}

</style>

